<template>
  <div class="home-grid">
    <van-grid :column-num="5" square :gutter="5">
      <van-grid-item v-for="list in menulist" :key="list">
        <van-image :src="list.url" />
          <span>{{ list.text }}</span> 
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import menu1 from '../assets/images/menu1.png'
import menu2 from '../assets/images/menu2.png'
import menu3 from '../assets/images/menu3.png'
import menu4 from '../assets/images/menu4.png'
import menu5 from '../assets/images/menu5.png'
import menu6 from '../assets/images/menu6.png'
import menu7 from '../assets/images/menu7.png'
import menu8 from '../assets/images/menu8.png'
import menu9 from '../assets/images/menu9.png'
import menu10 from '../assets/images/menu10.png'

const menulist = [
{ text: '今日爆款', url: menu1 },
{ text: '好物分享', url: menu2 },
{ text: '推荐购买', url: menu3 },
{ text: '购物心得', url: menu4 },
{ text: '直播专区', url: menu5 },
{ text: '签到中心', url: menu6 },
{ text: '值得购买', url: menu7 },
{ text: '每日优惠', url: menu8 },
{ text: '充值中心', url: menu9 },
{ text: '我的客服', url: menu10 }
]
</script>

<style lang="less" scoped> 
.home-grid {
  .van-image {
    width: 55%;
  }
  span {
    font-size: 12px;
  }
}
</style>
